<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查询显示所有的菜单表格数据</title>

		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>


	</head>
	<body>
		<div id="app">

			<el-table :data="tableData" border style="width: 100%" size="mini">
				<el-table-column prop="label" label="菜单名字" width="180">
				</el-table-column>
				<el-table-column prop="href" label="链接地址" width="180">
				</el-table-column>
				<el-table-column prop="imgicon" label="图标" width="180">
				</el-table-column>

				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" size="mini" @click="add(scope.$index, scope.row)">增加</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="up(scope.$index, scope.row)">编辑</el-button>

					</template>
				</el-table-column>

			</el-table>

			<!-- 增加菜单 -->
			<el-dialog title="增加菜单" :visible.sync="dialogFormVisibleAdd">
				<el-form :model="formadd">
					<el-form-item label="菜单名字" label-width="80px">
						<el-input v-model="formadd.label"></el-input>
					</el-form-item>
					<el-form-item label="链接地址" label-width="80px">
						<el-input v-model="formadd.href"></el-input>
					</el-form-item>
					<el-form-item label="图标" label-width="80px">
						<i :class="formadd.imgicon"></i>
						<el-select v-model="formadd.imgicon" placeholder="请选择图标">
							<el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
								<i :class="item"></i>
								{{item}}
							</el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="所属父级" label-width="80px">
						<el-cascader :props="parentidProps"  v-model="formadd.parentid"
							:options="parentidOptions"></el-cascader>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>

			<!-- 编辑菜单 -->
			<el-dialog title="编辑菜单" :visible.sync="dialogFormVisibleUp">
				<el-form :model="formup">
					<el-form-item label="菜单名字" label-width="80px">
						<el-input v-model="formup.label"></el-input>
					</el-form-item>
					<el-form-item label="链接地址" label-width="80px">
						<el-input v-model="formup.href"></el-input>
					</el-form-item>
					<el-form-item label="图标" label-width="80px">
						<i :class="formup.imgicon"></i>
						<el-select v-model="formup.imgicon" placeholder="请选择图标">
							<el-option v-for="item in imgiconoptions" :key="item" :label="item" :value="item">
								<i :class="item"></i>
								{{item}}
							</el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="所属父级" label-width="80px">
						<el-cascader :props="parentidProps"  v-model="formup.parentid"
							:options="parentidOptions"></el-cascader>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleUp = false">取 消</el-button>
					<el-button type="primary" @click="upsubmit">确 定</el-button>
				</div>
			</el-dialog>

		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					imgiconoptions: ["el-icon-eleme", "el-icon-delete-solid", "el-icon-picture-outline-round",
						"el-icon-video-camera-solid", "el-icon-s-unfold"
					],
					tableData: [],
					dialogFormVisibleAdd: false, //控制增加菜单的dialog显示
					dialogFormVisibleUp: false, //控制编辑菜单的dialog显示
					formadd: { //增加菜单的form
						label: "",
						href: "",
						imgicon: "",
						parentid: 0,
					},
					formup: { //编辑菜单的form
						id: 0,
						label: "",
						href: "",
						imgicon: "",
						parentid: 0,
					},
					parentidOptions: [], //父级菜单集合数据
					parentidProps: { //配置父级菜单cascader
						value: "id",
						emitPath: false,
						checkStrictly: true
					},
				},
				methods: {
					initTableData() {
						let that = this
						axios.get(API + "selectmenu").
						then(function(res) {
							// console.log(res.data.data.menuList)
							that.tableData = res.data.data.menuList
						}).catch(err => {
							console.log(err)
						});
					},
					up(index, row) { //编辑
						this.selectAllMenu() //先填充父级菜单下拉列表

						//根据id获取修改的这个对象
						let that = this
						axios.get(API + "selectmenubyid/" + row.id).
						then(function(res) {
							let menu = res.data.data.menu
							that.formup = menu

							console.log(res.data.data)
						}).catch(err => {
							console.log(err)
						});

						this.dialogFormVisibleUp = true
						// console.log(index, row);
					},
					add() { //增加按钮的显示操作
						this.selectAllMenu()
						this.dialogFormVisibleAdd = true
					},
					selectAllMenu() { //获取所有的菜单数据，填充父级菜单下拉列表
						//获取所有的菜单集合
						let that = this
						axios.get(API + "selectmenu").
						then(function(res) {
							let arrs = arrayToTree(res.data.data.menuList)
							that.parentidOptions = arrs
						}).catch(err => {
							console.log(err)
						});
					},
					addsubmit() { //增加提交
						console.log(this.formadd)
					},
					upsubmit() { //编辑的提交
						console.log(this.formup)
					}
				},
				mounted() {
					this.initTableData();
				}
			})
		</script>
	</body>
</html>